<!--
 * @Description: 角色管理
 * @Author: chendingfengmail@163.com
 * @Date: 2021-10-29 13:35:53
 * @LastEditTime: 2022-01-17 13:57:51
 * @LastEditors: chendingfengmail@163.com
 * @Reference:
-->
<!-- 角色管理 -->
<template>
  <dd-container>
    <dd-card>
      <!-- 数据信息 -->
      <dd-table ref="rolesTable" :data="tableData" rowKey="id" :option="option" :screen="searchForm" :loadingData="loadRoleList">
        <template slot="condition">
          <el-form-item label="角色名称">
            <el-input v-model="searchForm.description" placeholder="请输入角色名称(中文)" clearable></el-input>
          </el-form-item>
          <el-form-item label="系统名称">
            <el-input v-model="searchForm.name" placeholder="请输入角色系统名(英文)" clearable></el-input>
          </el-form-item>
        </template>

        <template slot="operation">
          <el-form-item>
            <el-button type="search" size="small" @click="onSearch" v-if="showButton($route.path, '查询')">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="add" size="small" @click="openDialog('add')" v-if="showButton($route.path, '新增')">新增</el-button>
          </el-form-item>
        </template>

        <el-table-column prop="description" label="角色名称" align="center" width="200"></el-table-column>
        <el-table-column prop="name" label="系统名称" align="center" width="200"></el-table-column>
        <el-table-column prop="reserver1" label="角色描述" align="center" min-width="300"></el-table-column>

        <el-table-column label="操作" align="center" width="290">
          <template slot-scope="scope">
            <el-button size="mini" type="add" @click="openRoleMenuDialog(scope.row)" v-if="showButton($route.path, '权限')">权限</el-button>
            <el-button size="mini" type="info" @click="openDialog('info', scope.row)" v-if="showButton($route.path, '详情')">详情</el-button>
            <el-button size="mini" type="edit" @click="openDialog('edit', scope.row)" v-if="showButton($route.path, '编辑')">编辑</el-button>
            <el-button size="mini" type="del" @click="handleDelete(scope.$index, scope.row)" v-if="showButton($route.path, '删除')">删除</el-button>
          </template>
        </el-table-column>
      </dd-table>
      <RoleHandleDialog :visible.sync="roleHandleDialogVisible" :modelType="modelType" :modelData="modelData" @loadList="loadRoleList"></RoleHandleDialog>
      <RoleMenuDialog :visible.sync="roleMenuDialogVisible" :modelData="modelData"></RoleMenuDialog>
    </dd-card>
  </dd-container>
</template>

<script>
import RoleHandleDialog from './dialog/roleHandleDialog';
import RoleMenuDialog from './dialog/roleMenuDialog.vue';
import { mapActions,mapGetters } from 'vuex';

export default {
  name: 'role',
  components: {
    RoleHandleDialog,
    RoleMenuDialog,
  },
  data() {
    return {
      searchForm: {
        name: '',
        pageIndex: 1,
        pageSize: 10,
      },
      tableData: [],
      option: {
        total: 0,
        loading: true,
        operation: true,
      },
      modelData: {},
      modelType: 'info',
      roleHandleDialogVisible: false, // 角色处理对话框
      roleMenuDialogVisible: false, // 角色权限对话框
    };
  },

  computed: {
    ...mapGetters('ddAdmin/menu', ['showButton'])
  },

  mounted() {
    this.loadRoleList();
  },

  methods: {
    ...mapActions('ddAdmin/role', ['set', 'loadRoles']),
    onSearch() {
      this.currentPage = this.$options.data().currentPage;
      this.searchForm.pageIndex = this.$options.data().searchForm.pageIndex;
      this.loadRoleList();
    },

    // 加载角色列表
    async loadRoleList() {
      try {
        let count = await this.$api.userRole.findRoleListMax(this.searchForm);
        let result = await this.$api.userRole.findRoleList(this.searchForm);
        this.option.total = count.value;
        this.tableData = result.value;
        this.option.loading = false;
      } catch (error) {
        console.log(error)
        this.option.loading = false;
      }
    },

    // 删除角色
    handleDelete(index, row) {
      let _this = this;
      this.$confirm(`此操作将永久删除 ${row.name} 角色, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose(action, instance, done) {
          if (action == 'confirm') {
            this.$api.userRole
              .deleteRole(row.id)
              .then((res) => {
                this.$message.success('删除成功');
                done();
                _this.loadRoles(false);
                _this.loadRoleList();
              })
              .catch((error) => {
                console.log(error);
              });
          } else {
            done();
          }
        },
      })
        .then(() => { })
        .catch((err) => {
          this.$message.info('已取消删除');
        });
    },

    // 打开弹窗
    openDialog(modelType, modelData) {
      this.modelType = modelType;
      this.modelData = modelData === undefined ? {} : JSON.parse(JSON.stringify(modelData));
      this.roleHandleDialogVisible = true;
    },

    // 打开 角色权限 对话框
    openRoleMenuDialog(row) {
      this.roleMenuDialogVisible = true;
      this.modelData = row;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style lang='scss' scoped>
</style>
